<template>
	<t-calendar :minDate="minDate" :value="[query.date, query.end_date]" v-model:visible="calendarVisible" type="range" @confirm="handleConfirm"></t-calendar>
	<div style="padding: 10px 12px 0 12px; position: fixed; width: 100%; z-index: 10;">
		<el-card @click="selectDate" style="text-align: center;">
			<t-row>
				<t-col span="10" class="onlyfont18">{{query.date}}</t-col>
				<t-col span="4"><span style="color: #409eff">选日期</span></t-col>
				<t-col span="10" class="onlyfont18">{{query.end_date}}</t-col>
			</t-row>
		</el-card>
	</div>

	<div style="margin-top: 120px;">
		<div class="onlyfont24" style="padding: 0 12px;">总计： {{total_money}}元</div>
		
		<t-collapse expand-mutex theme="card">
		    <t-collapse-panel v-for="(total_item,total_index) in total_data" :key="total_index" :value="total_index" placement="bottom" header="折叠面板标题">
		    	<template #header>
		    		<t-row>
		    			<t-col span="18">{{total_index}}</t-col>
		    			<t-col span="6"><span style="color: red">{{total_item.total}}</span></t-col>
		    		</t-row>
		    	</template>

		    	<div class="content">
		    		<t-cell v-for="(item, index) in total_item['data']" :key="index">
						<template #title>
							<div class="font24">{{item.process_name}}</div>
						</template>
						<template #description>
							<t-row>
								<t-col span="12" style="text-align: center;" class="onlyfont16">
									<div>数量</div>
									<div>{{item.number}}</div>
								</t-col>
								<t-col span="12" style="text-align: center;" class="onlyfont16">
									<div>单价</div>
									<div>{{item.price}}</div>
								</t-col>
							</t-row>
						</template>
						<template #note>
							<span style="color: red" class="onlyfont18">{{item.money}}</span>
							<span style="color: red">元</span>
						</template>
					</t-cell>
		    	</div>
		    </t-collapse-panel>
		</t-collapse>
					
	</div>
	<t-divider align="center">
		<template #content>
			<span class="onlyfont18" style="color: black;">详细缸号</span>
		</template>
	</t-divider>
	<div style="background-color: white; padding: 5px 15px;">
		<t-search
	      v-model="query.detail_search"
	      placeholder="请输入 缸号/尺码/颜色/工序"
	      @action-click="onActionClick"
	      @submit="onSearchSubmit"
	    ></t-search>
    </div>
	<t-list @scroll="onScroll">
		<t-cell-group theme="">
			<t-cell v-for="salary in salaries" :key="salary.id">
				<template #title>
					<t-row>
						<t-col span="12" class="font24">{{salary.process_name}}</t-col>
						<t-col span="12" class="onlyfont18">单价:{{salary.price}}</t-col>
					</t-row>
				</template>
				<template #description>
					<t-row style="color: bule">
					    <t-col span="24" class="onlyfont16">{{salary.procedure_name}}</t-col>
					    <t-col span="12" class="onlyfont16">缸号:{{salary.gh}}</t-col>
					    <t-col span="12" class="onlyfont16">颜色:{{salary.color}}</t-col>
					    <t-col span="12" class="onlyfont16">数量:{{salary.number}}</t-col>
					    <t-col span="12" class="onlyfont16">尺码:{{salary.size}}</t-col>
					    <t-col span="24" class="onlyfont16">日期:{{salary.created_at}}</t-col>
					</t-row>
				</template>
				<template #note>
					<span class="onlyfont18" style="color: red">{{salary.money}}</span>
					<span style="color: red">元</span>
				</template>
			</t-cell>
		</t-cell-group>
	</t-list>
	<div style="padding: 30px;"></div>
	<div class="reback">
		<t-button size="large" @click="backUser" theme="primary" block>
			返回个人中心
		</t-button>
	</div>


</template>
<script>
	export default {
		data() {
			return {

				calendarVisible: false,
				value: [],
				query: {
					date: '',
					end_date: '',
					page: 1,
					total: 0,
					detail_search: ''
				},
				salaries: [],
				loadMore: false,
				minDate: '',
				total_data: [],
				total_money: 0
			}
		},
		watch:{
			
		},
		mounted() {
			let total = this.$route.query.total
			let type = this.$route.query.type
			if (total == 1) {
				this.query.total = 1
			} else {
				// 今日
				this.query.date = this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd')
				this.query.end_date = this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd')
				
			}

			//  本月 昨日
			if (type == 'yestoday') {
				var today = new Date();
				var yesterdayTimestamp = today.getTime() - (24 * 60 * 60 * 1000);
				var yesterday = new Date(yesterdayTimestamp);
				var yesterdayDate = yesterday.toISOString().slice(0, 10);

				this.query.date = yesterdayDate
				this.query.end_date = yesterdayDate
			} else if (type == 'month') {
				const { firstDay, lastDay  } = this.getFirstAndLastDayOfLastMonth();
				
				this.query.date = this.$TOOL.dateFormat(firstDay, 'yyyy-MM-dd')
				this.query.end_date = this.$TOOL.dateFormat(lastDay, 'yyyy-MM-dd')
			} else if (type == 'lastmonth') {
				const { firstDay, lastDay  } = this.getFirstAndLastDayOfLastMonth(-1);
				
				this.query.date = this.$TOOL.dateFormat(firstDay, 'yyyy-MM-dd')
				this.query.end_date = this.$TOOL.dateFormat(lastDay, 'yyyy-MM-dd')
			}

			this.getListSalary()
			// 总计 最后时间为当天 请求完所有后填写 
			if (total == 1) {
				this.query.end_date = this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd')
			}
		},
		methods: {
			async getListSalary() {
				var res = await this.$API.salary.salaryDay.get(this.query)

				if (res.code == 200) {
					// 设置查询开始时间
					if (this.query.total == 1) { this.query.date = res.open_time.substring(0, 10) }
					this.salaries.push(...res.list_data.data)
					if (this.query.page != 1 && res.list_data.data.length > 0) { this.loadMore = false }
					this.minDate = res.open_time.substring(0, 10)

					//如果第一次加载统计数据
					if (this.query.page == 1 && !this.query.detail_search) {
						this.total_money = res.total_money
						this.total_data = res.total_data
					}
				}
			},
			selectDate() {
				this.calendarVisible = true
			},
			handleConfirm(date) {
				this.query.total = 0
				this.query.detail_search = ''
				if (date.length == 2) {
					// 范围
					this.query.date = this.$TOOL.dateFormat(date[0], 'yyyy-MM-dd')
					this.query.end_date = this.$TOOL.dateFormat(date[1], 'yyyy-MM-dd')
				} else if (date.length == 1) {
					// 单日
					this.query.date = this.$TOOL.dateFormat(date[0], 'yyyy-MM-dd')
					this.query.end_date = this.$TOOL.dateFormat(date[0], 'yyyy-MM-dd')
				} else {
					this.$alert('请选择日期', '提示', {type: 'warning'})
					// this.calendarVisible = true
					return
				}

				this.query.page = 1
				this.salaries = []
				this.total_data = []
				this.total_money = 0

				this.getListSalary()

			},
			//上滑
			onScroll(bottom) {
				if (bottom < 50 && !this.loadMore) {
					// 滑倒了 可以加载的情况下
					this.loadMore = true
					this.query.page += 1;
					this.getListSalary()
				}
			},
			// 搜索明细
			onSearchSubmit() {
				this.query.page = 1
				this.salaries = []
				this.getListSalary()
			},
			backUser() {
				this.$router.replace({
					path: '/user'
				})
			},

			getFirstAndLastDayOfLastMonth($lastNumer = 0) {
			    const today = new Date();
			    const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() + $lastNumer, 1);
			    const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() + 1 + $lastNumer, 0);
			 
			    return {
			        firstDay: firstDayOfLastMonth,
			        lastDay: lastDayOfLastMonth
			    };
			}
				 
				
		}
	}
</script>
<style type="text/css">
	.card-title {
        font-size: 18px;
    }
    .card-subtitle {
        font-size: 20px;
    }
    
    .user-btn {
        width: 90%;
        margin: 0 auto;
    }
    .text-center{
        text-align: center;
    }
    .card+.card{margin-top: 20px;}
</style>